<template>
    <grid-layout
        :layout="layoutList"
        :col-num="24"
        :row-height="2"
        :is-draggable="false"
        :is-resizable="false"
        :is-mirrored="false"
        :vertical-compact="true"
        :autoSize="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
    >
        <grid-item
            class="gridItem"
            v-for="item in layoutList"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.i"
        >
            <!--图标放大-->
            <div v-if="!isFullShow && noShowFull.indexOf(item.defConf)<=-1 && item.config.fullBtn" class="gridItem-fullscreen">
                <rx-icon-show  icon="icon-linefullscreen" @click="fullScreenChild(item)"></rx-icon-show>
            </div>
            <form-custom-control :localParams="localParams" :id="item.id" :item="item" :ref="item.id" :readonly="true"></form-custom-control>
        </grid-item>
    </grid-layout>
</template>

<script>
/**
 * 拖拽布局
 */
import FormCustomControl from "./FormCustomControl.vue";
import {Util} from '@lowcode/jpaas-base-lib';
import { GridLayout, GridItem } from 'vue-grid-layout';
import formCustomViewEvent from "@/views/modules/form/FormCustomView/js/formCustomViewEvent.js";

export default {
    name: "GridLayoutView",
    components: {
        FormCustomControl,
        GridLayout,
        GridItem
    },
    mixins:[formCustomViewEvent],
    props: {
        layout: {
            type: Array,
            default: () => []
        },
        isFullShow:{
            default:false
        },
        localParams:{
            type:Object,
        }
    },
    data() {
        return {
            isCustomView:true,
            layoutList:this.layout,
            noShowFull:['filter'],//不展示放大按钮
            mode:'drag',//拖拽布局
        }
    },
    methods: {
        //单独全屏
        fullScreenChild(item){
            //流程
            let data={item: item};
            if(item.defConf=="bpm"){
                let itemVue= this.$refs[item.id]
                let bpmVue=itemVue[0].$refs[item.config.alias].$refs.openBpm;
                if(bpmVue && bpmVue.instId){
                    data.instId=bpmVue.instId;
                }
            }
            let baseConf = {
                component: FormCustomControl,
                curVm: this,
                title: ' ',
                max: true,
                data: data
            }
            Util.open(baseConf, function (action, data) {
            })
        },
    },
    watch: {
        layout:{
            handler(val){
                this.layoutList=val;
            },
            deep:true
        }
    },
}
</script>

<style scoped>
.gridItem{
    position: relative;
}
.gridItem:hover .gridItem-fullscreen{
    display: block;
}
.gridItem-fullscreen{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 22px;
    cursor: pointer;
    display: none;
    z-index: 99;
    background: #1890ff;
    width: 30px;
    height: 30px;
    border-radius: 5px;
    color: white;
    text-align: center;
    line-height: 30px;
}
</style>
